<template>
  <view class="content">
    <view class="menu_box">
      <view v-for="(item, index) in menu" :key="index" class="menu_def">
        <view
          v-if="menuIndex == item.id"
          class="menu_item menu_item_se"
          @click="selectMenu(index)"
        >
          {{ item.name }}
          <view class="line_01"></view>
        </view>
        <view v-else class="menu_item menu_item_def" @click="selectMenu(index)">
          {{ item.name }}
        </view>
      </view>
    </view>
    <exam-page v-if="menuIndex == 0" />
    <view v-if="menuIndex == 1">
      <swiper
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        class="my-swiper swiper_box"
        @change="onSwiperChange"
      >
        <swiper-item v-for="(item, index) in images" :key="index">
          <image class="swiper_img" :src="item"></image>
        </swiper-item>
      </swiper>
      <view class="doc_class">
        <view class="doc_class_1">
          <view
            v-for="(_, index) in images"
            :key="index"
            :class="['indicator', { active: currentIndex === index }]"
          ></view>
        </view>
      </view>
      <view class="ap_box">
        <view class="left_30"></view>
        <view v-for="(item, index) in pageForMyData" :key="index">
          <view
            :class="[
              'info_item_box',
              item.trainingState == 3 ? 'info_item' : '',
              item.trainingState == 2 ? 'info_item1' : '',
              item.trainingState == 1 ? 'info_item2' : '',
            ]"
            @click="info(item)"
          >
            <view class="title_icon">
              <label v-if="item.trainingState == 3" class="title_info"
                >已过期</label
              >
              <label v-if="item.trainingState == 2" class="title_info"
                >进行中</label
              >
              <label v-if="item.trainingState == 1" class="title_info"
                >待开始</label
              >
            </view>
            <view v-if="item.trainingState == 3" class="title_info_time">
              {{ item.trainingCycleEndDate }}结束
            </view>
            <view v-else class="title_info_time">
              {{ item.trainingCycleStartDate }}开始
            </view>
            <view class="title_info_content">
              <view class="box">
                <view v-if="item.userTrainingState == 9" class="box_1">
                  已完成
                </view>
                <view v-else-if="item.userTrainingState == 1" class="box_1">
                  进行中
                </view>
                <view v-else class="box_1"> 未参加 </view>

                <view class="box_2">
                  {{ item.trainingClassName }}
                </view>
                <view class="box_3">
                  {{ item.trainingCycleStartDate }}
                </view>
                <view style="width: 100%; float: left">
                  <!-- <view class="btn_001 btn_001_0">菜单式</view> -->
                  <view
                    class="btn_001 btn_001_1"
                    v-if="item.trainingAddressTypeCode"
                    >{{ item.trainingAddressTypeName }}培训</view
                  >
                  <view
                    class="btn_001 btn_001_2"
                    v-if="item.trainingNatureCode"
                    >{{ item.trainingNatureName }}</view
                  >
                  <view
                    class="btn_001 btn_001_3"
                    v-if="item.trainingFormCode"
                    >{{ item.trainingFormName }}</view
                  >
                  <!-- <view class="btn_001 btn_001_4">培训科目</view> -->
                </view>
                <view class="box_3"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="px_msg">
        <view class="title"> 培训数据 </view>
        <view class="detail">
          <view class="a1">
            <view class="num c1">
              {{ pxInfo.total_count }}
            </view>
            <view class="msg"> 本年度总培训次数 </view>
          </view>
          <view class="a2">
            <view class="num c2">
              {{ pxInfo.completed_count }}
            </view>
            <view class="msg"> 已经完成 </view>
          </view>
          <view
            style="
              width: 30%;
              float: left;
              line-height: 60rpx;
              text-align: center;
            "
          >
            <view class="num c3">
              {{ pxInfo.uncompleted_count }}
            </view>
            <view class="msg"> 未完成 </view>
          </view>
        </view>
      </view>

      <view class="mt180"></view>
    </view>
    <view v-if="menuIndex == 2">
      <view class="lx_box">
        <view class="lx_menu lx_menu_bg1" @click="question(1)">
          <view class="title c1"> 知识点专项练习 </view>
          <view class="info c1 bg1"> 进行针对性的专项训练 </view>
        </view>
        <view class="lx_menu lx_menu_bg2 mt_b5" @click="question(2)">
          <view class="title c2"> 题库练习 </view>
          <view class="info c2 bg2"> 拥有海业考试练习题 </view>
        </view>
        <view class="lx_menu lx_menu_bg3" @click="question(3)">
          <view class="title c2"> 闯关 </view>
          <view class="info c2 bg2"> 益智娱乐两不误 </view>
        </view>
        <view class="lx_menu lx_menu_bg4 mt_b5" @click="question(4)">
          <view class="title c3"> 技能pk </view>
          <view class="info c3 bg3"> 高水平的竞技比武 </view>
        </view>
        <view class="lx_title"> 今日任务 </view>
        <view class="item">
          <view class="qiandao">
            <view class="msg"> 签到 </view>
          </view>
          <view class="lx_item_title">
            {{ day.quest.topic }}
          </view>
          <!-- <image src="../../static/training/img001.png" class="image" mode="widthFix"></image>
					<image src="../../static/training/img001.png" class="image" mode="widthFix"></image> -->
          <view class="daan">
            <text
              v-for="(item, index) in day.quest.options"
              :key="index"
              @click="selectDay(index)"
            >
              <text v-if="dayIndex == index" class="daan_item se_item">
                <text v-if="index == 0">A、</text>
                <text v-if="index == 1">B、</text>
                <text v-if="index == 2">C、</text>
                <text v-if="index == 3">D、</text>
                <text v-if="index == 4">E、</text>
                <text v-if="index == 5">F、</text>
                {{ item.optionText }}
              </text>
              <text v-if="dayIndex != index" class="daan_item">
                <text v-if="index == 0">A、</text>
                <text v-if="index == 1">B、</text>
                <text v-if="index == 2">C、</text>
                <text v-if="index == 3">D、</text>
                <text v-if="index == 4">E、</text>
                <text v-if="index == 5">F、</text>
                {{ item.optionText }}
              </text>
            </text>
          </view>
          <view class="alert_msg">
            <image
              src="../../static/index/tishi.png"
              class="alert_image"
              mode="widthFix"
            ></image>
            <view class="t001"> 必填 </view>
            <view class="t002">
              答对+{{ day.success }}积分,答错+{{ day.error }}积分
            </view>
            <view class="btn" @click="submitInfo(1)"> 提交 </view>
          </view>
        </view>
        <view class="item">
          <view class="qiandao">
            <view class="msg1"> 每日一练 </view>
          </view>
          <view class="lx_item_title">
            {{ sign.quest.topic }}
          </view>
          <!-- <image src="../../static/training/img001.png" class="image" mode="widthFix"></image>
					<image src="../../static/training/img001.png" class="image" mode="widthFix"></image> -->
          <view class="daan">
            <text
              v-for="(item, index) in sign.quest.options"
              :key="index"
              @click="selectSign(index)"
            >
              <text v-if="signIndex == index" class="daan_item se_item">
                <text v-if="index == 0">A、</text>
                <text v-if="index == 1">B、</text>
                <text v-if="index == 2">C、</text>
                <text v-if="index == 3">D、</text>
                <text v-if="index == 4">E、</text>
                <text v-if="index == 5">F、</text>
                {{ item.optionText }}
              </text>
              <text v-if="signIndex != index" class="daan_item">
                <text v-if="index == 0">A、</text>
                <text v-if="index == 1">B、</text>
                <text v-if="index == 2">C、</text>
                <text v-if="index == 3">D、</text>
                <text v-if="index == 4">E、</text>
                <text v-if="index == 5">F、</text>
                {{ item.optionText }}
              </text>
            </text>
          </view>
          <view class="alert_msg">
            <image
              src="../../static/index/tishi.png"
              class="alert_image"
              mode="widthFix"
            ></image>
            <view class="t001"> 必填 </view>
            <view class="t002">
              答对+{{ sign.success }}积分,答错+{{ sign.error }}积分
            </view>
            <view class="btn" @click="submitInfo(2)"> 提交 </view>
          </view>
        </view>
        <view class="mt180"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInfo } from "@/common/api/login/login.js";
import {
  numsForMy,
  pageForMy,
  getPracticeDayAndSign,
  subPracticeDayAndSign,
} from "@/common/api/training/training.js";
import ExamPage from "./components/exam.vue";
export default {
  data() {
    return {
      sign: {
        success: 0,
        error: 0,
        quest: {
          topic: "",
          qtype: "",
          options: [],
        },
      },
      day: {
        success: 0,
        error: 0,
        quest: {
          topic: "",
          qtype: "",
          options: [],
        },
      },
      signIndex: -1,
      dayIndex: -1,
      title: "Hello",
      menuIndex: 0,
      pxInfo: {
        completed_count: "",
        total_count: "",
        uncompleted_count: "",
      },
      menu: [
        {
          id: 0,
          name: "考试",
        },
        {
          id: 1,
          name: "培训",
        },
        {
          id: 2,
          name: "练习",
        },
      ],
      images: [
        "../../static/banner-img.png",
        "../../static/banner-img.png",
        "../../static/banner-img.png",
        "../../static/banner-img.png",
      ],
      indicatorDots: false,
      autoplay: true,
      interval: 2000,
      duration: 500,
      currentIndex: 0,
      pageForMyData: [],
    };
  },
  components: {
    ExamPage,
  },
  onLoad() {
    this.getUserInfo();
    if (this.menuIndex == 1) {
      numsForMy().then((res) => {
        if (res && res.code == 200 && res.data) {
          this.pxInfo = res.data;
        }
      });
    } else if (this.menuIndex == 2) {
      this.signIndex = -1;
      this.dayIndex = -1;
      getPracticeDayAndSign({}).then((res) => {
        if (res && res.code == 200 && res.data) {
          this.day = res.data.day;
          this.sign = res.data.sign;
        }
      });
    }
  },
  methods: {
    question(type) {
      if (type != 2) {
        uni.showToast({
          title: "开发中",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/training/question",
      });
    },
    info(item) {
      if (item.trainingState == 1) {
        uni.showToast({
          title: "培训未开始",
          icon: "none",
        });
        return;
      } else if (item.trainingState == 3) {
        uni.showToast({
          title: "培训已过期",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/training/info?id=" + item.id,
      });
    },
    selectDay(index) {
      this.dayIndex = index;
    },
    selectSign(index) {
      this.signIndex = index;
    },
    goExamDetail() {
      uni.navigateTo({
        url: "/pages/exam/detail",
      });
    },
    getUserInfo() {
      getInfo().then((res) => {
        if (res && res.code == 200) {
        }
      });
    },
    selectMenu(index) {
      this.menuIndex = index;
      if (this.menuIndex == 2) {
        this.signIndex = -1;
        this.dayIndex = -1;
        getPracticeDayAndSign({}).then((res) => {
          if (res && res.code == 200 && res.data) {
            this.day = res.data.day;
            this.sign = res.data.sign;
          }
        });
      } else if (this.menuIndex == 1) {
        numsForMy().then((res) => {
          if (res && res.code == 200 && res.data) {
            this.pxInfo = res.data;
          }
        });
        pageForMy().then((res) => {
          if (res && res.code == 200 && res.data) {
            for (var i = 0; i < res.data.rows.length; i++) {
              if (res.data.rows[i].trainingCycleEndDate) {
                res.data.rows[i].trainingCycleEndDate = res.data.rows[
                  i
                ].trainingCycleEndDate.substring(0, 10);
              }
              if (res.data.rows[i].trainingCycleStartDate) {
                res.data.rows[i].trainingCycleStartDate = res.data.rows[
                  i
                ].trainingCycleStartDate.substring(0, 10);
              }
            }

            this.pageForMyData = res.data.rows;
          }
        });
      }
    },
    submitInfo(type) {
      const data = {
        type: type, //1签到  2一日一练
        questionId: "", //题目ID
        qtype: "", //题目类型按提供的quest内同名参数返回
        userAnswer: "", //用户作答数据，内容为 option 的id ,多选逗号分割
      };
      if (type == 1) {
        if (this.dayIndex == -1) {
          uni.showToast({
            title: "请选择答案",
            icon: "none",
          });
          return;
        }
        if (this.day.issign == "yes") {
          uni.showToast({
            title: "今日已签到",
            icon: "none",
          });
          return;
        }
        data.qtype = this.day.quest.qtype;
        data.questionId = this.day.quest.id;
        data.userAnswer = this.day.quest.options[this.dayIndex].id;
      } else {
        if (this.signIndex == -1) {
          uni.showToast({
            title: "请选择答案",
            icon: "none",
          });
          return;
        }
        if (this.sign.issign == "yes") {
          uni.showToast({
            title: "练习已完成",
            icon: "none",
          });
          return;
        }
        data.qtype = this.sign.quest.qtype;
        data.questionId = this.sign.quest.id;
        data.userAnswer = this.sign.quest.options[this.signIndex].id;
      }
      uni.showModal({
        title: "提示",
        content: "确定提交答案？",
        success: (res) => {
          if (res.confirm) {
            subPracticeDayAndSign(data).then((r) => {
              if (r && r.code == 200 && r.data) {
                uni.showToast({
                  title: "成功",
                  icon: "none",
                });
              }
            });
          }
        },
      });
    },
    onSwiperChange(event) {
      this.currentIndex = event.detail.current;
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../common/base.css");
@import "./index.scss";
</style>
